<template>
    <div style="padding: 24px 0; background: #fff" v-for="(item, index) of list" :key="index">
        <flexbox justify="space-between">
            <flexbox>
                <span style="font-size: 24px; color: #172b4d" class="font-w-b"> {{ item.pmpProductDetailDTO.systemName }} </span>
                <a-tag color="cyan" style="margin-left: 12px">{{ item.pmpProductDetailDTO.catalogType === '1' ? '产品' : '子产品' }}</a-tag>
                <flexbox style="margin-left: 4px" v-if="item.jiraErrorMsg">
                    <ExclamationCircleFilled style="color: red" />
                    <span style="margin-left: 4px"> {{ item.jiraErrorMsg }} </span>
                </flexbox>
            </flexbox>
            <flexbox>
                <flexbox v-if="$filters.systemProductTypeFilter(item.pmpProductDetailDTO.productType)">
                    <a-tag
                        :color="getRandomColor(index)"
                        v-for="(item, index) of $filters.systemProductTypeFilter(item.pmpProductDetailDTO.productType).split(',')"
                        :key="item"
                    >
                        {{ item }}
                    </a-tag>
                </flexbox>
                <flexbox
                    style="cursor: pointer"
                    @click="handleDetail(item.pmpProductDetailDTO.catalogCode)"
                    v-auth="'energyManage.analysisReport.beijixingBoard.preview'"
                    v-if="
                        item.pmpProductDetailDTO.isSettingReport &&
                        ((reportType == 1 && item.pmpProductDetailDTO.isMonth == 1) ||
                            (reportType == 2 && item.pmpProductDetailDTO.isQuarter == 1) ||
                            (reportType == 3 && item.pmpProductDetailDTO.isHalfYear == 1) ||
                            (reportType == 4 && item.pmpProductDetailDTO.isYear == 1))
                    "
                >
                    <span style="margin: 0 6px 0 24px">查看报告</span>
                    <RightOutlined />
                </flexbox>
            </flexbox>
        </flexbox>
        <flexbox style="width: 100%; margin: 12px 0 16px 0">
            <a-row style="width: 100%">
                <a-col :span="5">
                    <span>管理平台：</span>
                    <span> {{ item.pmpProductDetailDTO.isOutsideSystem === '0' ? '技术中台' : 'JIRA' }}</span>
                </a-col>
                <a-col :span="5">
                    <span>发版周期：</span>
                    <span> {{ item.releasePeriodAvgWeeks ? `${item.releasePeriodAvgWeeks}周` : '不固定' }}</span>
                </a-col>
                <a-col :span="5">
                    <span>统计颗粒度：</span>
                    <span>{{ item.pmpProductDetailDTO?.isOutsideSystem === '0' ? '预发布版本' : '需求【jira-issue】' }}</span>
                </a-col>
                <a-col :span="6">
                    <span> 全生命周期管理阶段：</span>
                    <span> {{ item.pmpProductDetailDTO.isOutsideSystem === '0' ? '全生命周期' : '需求研发、需求测试' }}</span>
                </a-col>
            </a-row>
        </flexbox>
        <flexbox>
            <div class="card-item-left" v-if="item.pmpProductDetailDTO.isOutsideSystem === '0'">
                <div class="title">需求数量</div>
                <flexbox class="margin-t-16">
                    <div class="line-1"></div>
                    <div class="num margin-l-16 font-w-b" v-if="item.businessCount">{{ item.businessCount }}</div>
                    <MinusOutlined class="num margin-l-16 font-w-b" v-else />
                    <div class="type">新增业务需求</div>
                </flexbox>

                <flexbox style="margin-top: 20px">
                    <div class="line-2"></div>
                    <div class="num margin-l-16 font-w-b" v-if="item.productCount">{{ item.productCount }}</div>
                    <MinusOutlined class="num margin-l-16 font-w-b" v-else />
                    <div class="type">上线产品需求</div>
                </flexbox>

                <flexbox style="margin-top: 20px">
                    <div class="line-3"></div>
                    <div class="num margin-l-16 font-w-b" v-if="item.versionCount">{{ item.versionCount }}</div>
                    <MinusOutlined class="num margin-l-16 font-w-b" v-else />
                    <div class="type">上线版本数</div>
                </flexbox>
            </div>
            <div class="card-item-left" v-else>
                <div class="title">需求数量</div>
                <flexbox class="margin-t-16">
                    <div class="line-1"></div>
                    <div class="num margin-l-16 font-w-b" v-if="item.productCount">{{ item.productCount }}</div>
                    <MinusOutlined class="num margin-l-16 font-w-b" v-else />
                    <div class="type">issue</div>
                </flexbox>

                <flexbox class="margin-t-16">
                    <div class="line-2"></div>
                    <div class="num margin-l-16 font-w-b" v-if="item.versionCount">{{ item.versionCount }}</div>
                    <MinusOutlined class="num margin-l-16 font-w-b" v-else />
                    <div class="type">version</div>
                </flexbox>

                <flexbox class="margin-t-16">
                    <div class="line-3"></div>
                    <div class="num margin-l-16 font-w-b" v-if="item.businessCount">{{ item.businessCount }}</div>
                    <MinusOutlined class="num margin-l-16 font-w-b" v-else />
                    <div class="type">epic</div>
                </flexbox>
            </div>

            <div class="card-item-center">
                <flexbox justify="space-between">
                    <span style="color: #505a6e">交付效率</span>
                    <flexbox class="caption-font-color" style="cursor: pointer" @click="showDetail(item, index, 1)" v-if="!item.jiraErrorMsg">
                        <span style="margin-right: 6px">指标解读</span>
                        <RightOutlined />
                    </flexbox>
                </flexbox>

                <flexbox>
                    <div class="card-item-center-chart">
                        <div style="position: absolute; top: 0">
                            <flexbox>
                                <flexbox style="margin-top: 18px">
                                    <span style="font-size: 14px; color: #172b4d" class="font-w-b">
                                        {{ item.pmpProductDetailDTO.isOutsideSystem === '0' ? '需求交付周期' : '研发交付周期' }}
                                    </span>
                                    <img
                                        src="@/assets/images/beijixing/beijixing-icon2.png"
                                        style="margin-left: 4px; width: 49px; height: 12px"
                                        v-if="item.pmpProductDetailDTO.isOutsideSystem === '0'"
                                    />
                                </flexbox>
                            </flexbox>

                            <flexbox style="margin-top: 8px" v-if="item.onlineAvgDays">
                                <span style="font-size: 22px" class="font-w-b">{{ item.onlineAvgDays }}</span>
                                <div v-if="(item.onlineAvgDays || item.onlineAvgDays === 0) && item.relativeOnlineAvgDays">
                                    <a-tag
                                        color="red"
                                        style="border-radius: 10px"
                                        class="margin-l-16"
                                        v-if="item.onlineAvgDays - item.relativeOnlineAvgDays > 0"
                                    >
                                        +{{ ~~(((item.onlineAvgDays - item.relativeOnlineAvgDays) / item.relativeOnlineAvgDays) * 100) }}%
                                    </a-tag>
                                    <a-tag
                                        color="green"
                                        style="border-radius: 10px"
                                        class="margin-l-16"
                                        v-if="item.onlineAvgDays - item.relativeOnlineAvgDays < 0"
                                    >
                                        -{{
                                            ~~(((item.relativeOnlineAvgDays - item.onlineAvgDays).toFixed(1) / item.relativeOnlineAvgDays) * 100)
                                        }}%</a-tag
                                    >
                                </div>
                            </flexbox>
                        </div>
                        <div style="height: 30px" />
                        <div v-if="item.pmpProductDetailDTO.isOutsideSystem === '0' && item.onlineAvgDays">
                            <HLineChart :option="lineOptionsArrA[index]" height="200px" v-if="item.onlineTrendDays && item.onlineTrendDays.length" />
                        </div>
                        <flexbox align="center" style="height: 80px" v-if="!item.onlineAvgDays">
                            <MinusOutlined style="font-size: 30px" />
                        </flexbox>
                    </div>

                    <div style="width: 50%; height: 170px">
                        <!-- 外采 -->
                        <flexbox v-if="item.pmpProductDetailDTO.isOutsideSystem === '0'" style="margin-top: 12px">
                            <a-select placeholder="请选择" v-model:value="item.isRequireAnalyse" @change="handleSelectChange($event, item, index)">
                                <a-select-option key="是"> 系统性分析需求 </a-select-option>
                                <a-select-option key="否"> 非系统性分析需求 </a-select-option>
                            </a-select>
                            <a-select
                                placeholder="请选择"
                                allowClear
                                v-model:value="item.deliveryMode"
                                @change="handleSelectChange($event, item, index)"
                                style="margin-left: 12px"
                                v-if="item.pmpProductDetailDTO.systemType === '1'"
                            >
                                <a-select-option key="1"> 项目模式 </a-select-option>
                                <a-select-option key="2"> 迭代模式 </a-select-option>
                            </a-select>
                        </flexbox>
                        <flexbox justify="space-between" style="margin-top: 12px; height: 26px" v-for="elem of getAvgDays(item)" :key="elem.name">
                            <span class="caption-font-color">{{ elem.name }}：</span>
                            <flexbox v-if="item[elem.key]">
                                <span style="font-size: 18px">{{ item[elem.key] }}</span>
                                <span class="caption-font-color" style="margin-left: 4px">天</span>
                            </flexbox>
                            <MinusOutlined style="font-size: 15px" v-else />
                        </flexbox>
                    </div>
                </flexbox>
            </div>

            <div class="card-item-right">
                <flexbox justify="space-between">
                    <span style="color: #505a6e">交付质量</span>
                    <flexbox class="caption-font-color" style="cursor: pointer" @click="showDetail(item, index, 2)">
                        <span style="margin-right: 6px">指标解读</span>
                        <RightOutlined />
                    </flexbox>
                </flexbox>

                <flexbox>
                    <div class="card-item-center-chart">
                        <div style="position: absolute; top: 0">
                            <flexbox>
                                <flexbox style="margin-top: 18px">
                                    <span style="font-size: 14px; color: #172b4d" class="font-w-b">平均缺陷率</span>
                                    <img src="@/assets/images/beijixing/beijixing-icon2.png" style="margin-left: 4px; width: 49px; height: 12px" />
                                </flexbox>
                            </flexbox>

                            <flexbox style="margin-top: 8px" v-if="item.faultRate">
                                <span style="font-size: 22px" class="font-w-b">{{ item.faultRate }}</span>
                                <div v-if="(item.faultRate || item.faultRate === 0) && item.relativeFaultRate">
                                    <a-tag
                                        color="red"
                                        style="border-radius: 10px"
                                        class="margin-l-16"
                                        v-if="item.faultRate - item.relativeFaultRate > 0"
                                    >
                                        +{{ ~~(((item.faultRate - item.relativeFaultRate) / item.relativeFaultRate) * 100) }}%
                                    </a-tag>
                                    <a-tag
                                        color="green"
                                        style="border-radius: 10px"
                                        class="margin-l-16"
                                        v-if="item.faultRate - item.relativeFaultRate < 0"
                                    >
                                        -{{ ~~(((item.relativeFaultRate - item.faultRate).toFixed(1) / item.relativeFaultRate) * 100) }}%</a-tag
                                    >
                                </div>
                            </flexbox>
                        </div>
                        <div style="height: 30px" />
                        <div v-if="item.faultTrendRate && item.faultTrendRate.length">
                            <HLineChart :option="lineOptionsArrB[index]" height="200px" v-if="item.faultTrendRate && item.faultTrendRate.length" />
                        </div>
                        <flexbox align="center" style="height: 80px" v-else>
                            <MinusOutlined style="font-size: 30px" />
                        </flexbox>
                    </div>

                    <div style="width: 50%; height: 170px">
                        <flexbox justify="space-between" style="margin-top: 12px; height: 26px" v-for="elem of getTestData(item)" :key="elem.name">
                            <span class="caption-font-color">{{ elem.name }}：</span>
                            <flexbox v-if="item[elem.key]">
                                <span style="font-size: 18px" v-if="elem.key === 'faultKloc'">{{ item[elem.key] }}</span>
                                <span style="font-size: 18px" v-else>{{ `${parseFloat((item[elem.key] * 100).toFixed(2))}%` }}</span>
                            </flexbox>
                            <MinusOutlined style="font-size: 15px" v-else />
                        </flexbox>
                    </div>
                </flexbox>
            </div>
        </flexbox>
    </div>
</template>

<script lang="ts">
import { useRouter, useRoute } from 'vue-router';
import { HLineChart } from '@/components';
import { RightOutlined, MinusOutlined, ExclamationCircleFilled } from '@ant-design/icons-vue';
import { defineComponent, ref, unref, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    components: {
        RightOutlined,
        HLineChart,
        MinusOutlined,
        ExclamationCircleFilled
    },
    props: {
        list: {
            type: Array,
            default: () => []
        },
        queryArr: {
            type: Array,
            default: () => []
        },
        searchQuery: {
            type: Object,
            default: () => ({})
        },
        reportName: {
            type: String,
            default: ''
        },
        reportType: {
            type: String,
            default: ''
        }
    },
    emits: ['getItemData'],
    setup(props, { emit }) {
        const router = useRouter();
        const route = useRoute();
        const state = reactive<any>({
            lineOptionsArrA: [],
            lineOptionsArrB: []
        });
        const getAvgDays = (item) => {
            if (item.pmpProductDetailDTO.isOutsideSystem === '0' && item.pmpProductDetailDTO.systemType === '1') {
                return [
                    { name: '平均需求等待时长', key: 'acceptAvgDays' },
                    { name: '平均需求分析时长', key: 'analyseAvgDays' },
                    { name: '平均测试时长', key: 'testAvgDays' }
                ];
            } else {
                return [
                    { name: '平均需求等待时长', key: 'acceptAvgDays' },
                    { name: '平均需求分析时长', key: 'analyseAvgDays' },
                    { name: '平均开发时长', key: 'devAvgDays' },
                    { name: '平均测试时长', key: 'testAvgDays' }
                ];
            }
        };
        const getTestData = (item) => {
            return [
                { name: '生产缺陷逃逸率', key: 'prodFaultEscapeRate' },
                // { name: '缺陷密度（个/kcol）', key: 'faultKloc' },
                { name: '缺陷修复率', key: 'faultRepairRate' }
            ];
        };
        const getLineOptionsA = (item) => {
            let arr: any = [];
            if (props.searchQuery.granularity !== '3') {
                arr = item.onlineTrendDays.sort((a, b) => +a['mapKey'] - +b['mapKey']);
            } else {
                arr = item.onlineTrendDays;
            }
            const datesArr = arr.map((item) => item.mapKey);
            const valArr = arr.map((item) => item.mapValue);
            if (datesArr.length && valArr.length) {
                return {
                    legend: {
                        x: 'center',
                        y: 'bottom',
                        data: ['每日新增需求量']
                    },
                    xArr: [...datesArr],
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            // name: '每日新增需求量',
                            data: [...valArr],
                            type: 'line',
                            areaStyle: {
                                color: 'rgb(232, 243, 253)' //区域背景色
                            },
                            smooth: true
                        }
                    ],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            const tar0 = params[0];
                            if (props.searchQuery.granularity !== '3') {
                                return `${tar0.name}` + '<br/>' + `${tar0.value}天` + '<br/>';
                            } else {
                                return tar0.name + '<br/>' + `${tar0.value}天` + '<br/>';
                            }
                        }
                    }
                };
            } else {
                return null;
            }
        };
        const getLineOptionsB = (item) => {
            const arr: any = item.faultTrendRate;
            const datesArr = arr.map((item) => `V${item.mapKey}`);
            const valArr = arr.map((item) => item.mapValue);
            if (datesArr.length && valArr.length) {
                return {
                    legend: {
                        x: 'center',
                        y: 'bottom',
                        data: ['每日新增需求量']
                    },
                    xArr: [...datesArr],
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            // name: '每日新增需求量',
                            data: [...valArr],
                            type: 'line',
                            areaStyle: {
                                color: 'rgb(232, 243, 253)' //区域背景色
                            },
                            smooth: true
                        }
                    ],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            const tar0 = params[0];
                            return tar0.name + '<br/>' + `${tar0.value}` + '<br/>';
                        }
                    }
                };
            } else {
                return null;
            }
        };
        const showDetail = (item, index, type) => {
            const { isOutsideSystem, systemType } = item.pmpProductDetailDTO;
            let query: any = {
                isOutsideSystem,
                systemType,
                catalogCode: (props.queryArr[index] as any).catalogCode,
                catalogType: (props.queryArr[index] as any).catalogType,
                ...props.searchQuery,
                type
            };
            // 外采或者自研
            if (item.pmpProductDetailDTO.isOutsideSystem === '0') {
                query = {
                    ...query,
                    isRequireAnalyse: item.isRequireAnalyse
                };
                if (item.pmpProductDetailDTO.systemType === '1') {
                    query = {
                        ...query,
                        deliveryMode: item.deliveryMode
                    };
                }
            }
            router.push({
                path: '/energyManage/beijixing/detail',
                query
            });
        };
        const handleSelectChange = (val, item, index) => {
            emit('getItemData', {
                index,
                item
            });
        };
        const handleDetail = (catalogCode) => {
            router.push({
                path: '/energyManage/analysisReport/preview',
                query: {
                    id: route.query.id,
                    catalogCode,
                    startTime: props.searchQuery.startTime,
                    endTime: props.searchQuery.endTime,
                    reportName: props.reportName
                }
            });
        };
        const getRandomColor = (index) => {
            const num = index % 3;
            switch (num) {
                case 0:
                    return 'green';
                case 1:
                    return 'blue';
                case 2:
                    return 'orange';
                default:
                    return 'green';
            }
        };
        watch(
            () => props.list,
            (n) => {
                const arrA: any = [];
                const arrB: any = [];
                n.forEach((item: any) => {
                    let targetA: any = null;
                    let targetB: any = null;
                    if (item.pmpProductDetailDTO.isOutsideSystem === '0' && item.onlineAvgDays) {
                        if (item.onlineTrendDays && item.onlineTrendDays.length) {
                            targetA = getLineOptionsA(item);
                        }
                    }
                    arrA.push(targetA);
                    if (item.faultTrendRate && item.faultTrendRate.length) {
                        if (item.faultTrendRate && item.faultTrendRate.length) {
                            targetB = getLineOptionsB(item);
                        }
                    }
                    arrB.push(targetB);
                });
                setTimeout(() => {
                    state.lineOptionsArrA = [...arrA];
                    state.lineOptionsArrB = [...arrB];
                });
            },
            {
                deep: true
            }
        );
        return {
            ...toRefs(state),
            showDetail,
            getAvgDays,
            getTestData,
            handleSelectChange,
            getRandomColor,
            handleDetail
        };
    }
});
</script>

<style scoped lang="less">
.card-item-left,
.card-item-center,
.card-item-right {
    padding: 16px 24px;
    height: 250px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #edeff3;
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.05), 0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 2px 4px -1px rgba(0, 0, 0, 0.12);
}
.card-item-left {
    width: 18%;
    .title {
        font-size: 14px;
        color: #505a6e;
    }
    .line-1 {
        width: 3px;
        height: 10px;
        background: #ffd271;
    }
    .line-2 {
        width: 3px;
        height: 10px;
        background: #f7762a;
    }
    .line-3 {
        width: 3px;
        height: 10px;
        background: #3f76fc;
    }
    .type {
        margin-left: 36px;
        font-size: 14px;
        color: #8590a5;
    }
    .num {
        font-size: 18px;
    }
}
.card-item-center {
    width: calc(41% - 24px);
    margin-left: 24px;
    &-chart {
        width: 50%;
        height: 170px;
        position: relative;
    }
}
.card-item-right {
    width: calc(41% - 24px);
    margin-left: 24px;
}

::v-deep(.ant-select-selector) {
    height: 29px !important;
}
</style>